<template>
  <div>
    <section>
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" >
          <el-form-item>
            <el-input  placeholder="姓名" v-model="keyWorld"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="add">添加部门</el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <!--列表-->
      <template>
        <el-table :data="deptList" highlight-current-row v-loading="loading" style="width: 100%;" @select="selectTable">
          <el-table-column
              type="selection">
          </el-table-column>

          <el-table-column prop="id" label="部门id" >
          </el-table-column>

          <el-table-column prop="name" label="名称" >
          </el-table-column>

          <el-table-column prop="intro" label="简介" >
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" >
          </el-table-column>
          <el-table-column prop="parentName" label="上级部门名称"  >
          </el-table-column>

          <el-table-column
              fixed="right"
              label="操作">
            <template slot-scope="scope">
              <el-button  type="text" size="small" @click="update(scope.row)">修改</el-button>
              <el-button  type="text" size="small" @click="delObj(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex">
          <el-col :span="20" >
            <el-pagination
                background
                layout="total, sizes, prev, pager, next"
                :current-page="1"
                :page-size.sync="size"
                @current-change="changeCurrentPage"
                @size-change="changePageSize"
                :page-sizes="[5,10,15,20,25,30]"
                :total="total">
            </el-pagination>
          </el-col>
          <el-col :span="4" :push="2">
            <el-button type="danger" icon="el-icon-delete" @click="deleBatch">批量删除</el-button>
          </el-col>
        </el-row>
      </template>

    </section>
    <el-dialog title="添加部门" :visible.sync="showAddDept" :append-to-body="true" @open="opeanAddDept">
      <add-dept></add-dept>
    </el-dialog>

    <el-dialog title="修改部门" :visible.sync="showUpdateDept" :append-to-body="true" @open="openUpdateDepts">
      <update-dept></update-dept>
    </el-dialog>
  </div>

</template>
<script>
import addDept from "@/views/nav1/addDept";
import updateDept from "@/views/nav1/updateDept";
	// import { getUserList } from '../../api/api';
	//import NProgress from 'nprogress'
	import axios from "axios";
  export default {
    components: {addDept,updateDept},
    data() {
			return {
			  deptList:[],
        obj:[],
        loading:true,
        treeDeptList:[],
        page:1,
        size:10,
        total:0,
        keyWorld:'',
        showAddDept:false,
        showUpdateDept:false,
        deptId:null,
			}
		},
		mounted() {
      this.$bus.$on('closeUpdate',(flag)=>{
        if (flag) this.loadingData('');
        this.showUpdateDept=false;
      })
		  //加载数据
		  this.loadingData('');
		  //是否需要刷新数据
		  this.$bus.$on('closeAddDept',(flag)=>{
		    this.showAddDept=false;
		    if (flag){
		      this.loadingData('');
        }
      })
		},
    methods:{
      openUpdateDepts(){
        setTimeout(()=>{
          axios.get('http://localhost:8080/api/employ/findAll')
          .then(resp=>{
            if (resp.data.code==200){
              this.$message({
                message:resp.data.msg,
                type:'success'
              })
              this.$bus.$emit('updateDept',this.treeDeptList,this.deptId,resp.data.data)
            }
          })

        },0)
      },
      //修改数据
      update(row){
        this.showUpdateDept=true;
        this.deptId=row.id
      },
      delObj(row){
        this.$confirm('你确定要删除该行吗','提示',{
          confirmButtonText:'确定',
          cancelButtonText:'取消'
        }).then(()=>{
          let ids =[row.id];
          axios({
            url:'http://localhost:8080/api/tOrgDepartment/deleteBatch',
            data:ids,
            method:'post'
          }).then((resp)=>{
            if (resp.data.code==200){
              this.$message({
                message:resp.data.msg,
                type:'success'
              })
              //刷新数据
              this.loadingData('')
            }
            else this.$message({
              message:resp.data.msg,
              type:'error'
            })
          })
        }).catch(()=>{
          this.$message({
            message:'已取消',
            type:'info'
          })
        })
      },
      deleBatch(){
        if (this.obj==null||this.obj.length<1){
          this.$message({
            message:'请选中要删除的行',
            type:'error'
          })
          return false;
        }
        this.$confirm('确定要删除吗','提示',{
          confirmButtonText:"确定",
          cancelButtonText:"取消"
        }).then(()=>{
          //处理数据
          let ids = [];
          for (let i = 0; i < this.obj.length; i++) {
            ids.push(this.obj[i].id)
          }
          //发送请求删除数据
          axios({
            url:'http://localhost:8080/api/tOrgDepartment/deleteBatch',
            data:ids,
            method:'post'
          }).then((resp)=>{
            if (resp.data.code==200){
              this.$message({
                message:resp.data.msg,
                type:'success'
              })
              //刷新数据
              this.loadingData('')
            }
            else this.$message({
              message:resp.data.msg,
              type:'error'
            })
          })
        }).catch(()=>{
          this.$message({
            message:'已取消',
            type:'info'
          })
        })
      },
      selectTable(obj){
        this.obj=obj
      },
      changeCurrentPage(val){
        this.page=val;
        this.loadingData('')
      },
      changePageSize(val){
        this.size=val;
        this.loadingData('')
      },
      opeanAddDept(){
        setTimeout(()=>{
          this.$bus.$emit('addDept',this.treeDeptList);
        },0)
      },

		  getChildren(array){
		    let childrenList=[];
        for (let i = 0; i < array.length; i++) {
          let obj = {
            label:array[i].name,
            value:array[i].id,
            children: array[i].children!=null&&array[i].children.length>=1?
                this.getChildren(array[i].children):null
          }
          childrenList.push(obj)
        }
        return childrenList;
      },
		  //添加数据
      add(){

        this.showAddDept=true;
      },
		  //查找数据
		  search(){
		    this.loadingData(this.keyWorld)
      },
      loadingData(keyWorld){
        axios({
          url:'http://localhost:8080/api/tOrgDepartment/findAll',
          params:{
            page:this.page,
            size:this.size,
            keyWorld:keyWorld
          },
          method:'get'
        }).then(resp=>{
          if (resp.data.code==200){
            this.$message({
              message:'请求成功',
              type:'success'
            })
            this.deptList=resp.data.data
            this.total=resp.data.total

            this.loading=false;
          }
          this.getAllDept();
        })
      },
      //获取所有部门信息
      getAllDept(){
        axios({
          url:'http://localhost:8080/api/tOrgDepartment/findAll',
          params:{
            page:1,
            size:9999,
            keyWorld:''
          },
          method:'get'
        }).then(resp=>{
          if (resp.data.code==200){
            this.treeDeptList=this.getChildren(resp.data.data)
            console.info('加载完成的tree',this.treeDeptList)
            this.loading=false;
          }
        })
      }
    }
	};

</script>

<style scoped>

</style>